<template>
  <view class>
    <view class="login-tel">
      <view class="logo">
        <image class="logo-img" src="/static/logo.png" mode=""></image>
      </view>

      <view class='login-user'>
        <text class="user-text">账号：</text>
        <input type="text" v-model='userName' value="" placeholder="请输入手机号/昵称"/>
      </view>
      <view class='login-user'>
        <text class="user-text">密码：</text>
        <input type="text" v-model='userPwd' value="" placeholder="6-16位字符"/>
      </view>
      <view class="tel" @tap="submit">登录</view>

      <view class="login-other">
        <view class="other-text">
          <view>或者用以下方式登录</view>
        </view>
        <view class="other">
          <view class="other-item">
            <image src="/static/img/wechat.png" mode=""></image>
            <view>微信登录</view>
          </view>
          <view class="other-item">
            <image src="/static/img/QQ.png" mode=""></image>
            <view>QQ登录</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import $http from '@/api/request.js'
import {mapMutations} from 'vuex'
export default {
  data() {
    return {
      userName: '',
      userPwd: '',
      rules: {
        userName: {
          rules: /\S/,
          message: '账号不能为空'
        },
        userPwd: {
          rules: /^[0-9a-zA-Z]{6,16}$/,
          message: '密码应该为6-16位字符'
        }
      }
    }
  },
  methods: {
    ...mapMutations(['login']),
    submit() {
      if (!this.validate('userName')) return;
      if (!this.validate('userPwd')) return;
      uni.showLoading({
        title: '登录中...',
        mask: true
      });
      $http.request({
        url:"/login",
        method: 'POST',
        data: {
          userName: this.userName,
          userPwd: this.userPwd
        }
      }).then(res => {
        console.log("响应数据:", res);
        uni.hideLoading();
        this.login(res.data); // 更新登录状态和用户信息
        uni.switchTab({
          url: '/pages/tabbar/tabbar-5/tabbar-5'
        });
      }).catch(()=>{
        uni.hideLoading();
        uni.showToast({
          title: '登录失败',
          icon: 'none'
        })
      })
    },
    validate(key) {
      let bool = true;
      if (!this.rules[key].rules.test(this[key])) {
        uni.showToast({
          title: this.rules[key].message,
          icon: 'none'
        });
        bool = false;
        return false;
      }
      return bool;
    }
  }
}
</script>

<style scoped lang="scss">
.login-tel {
  width: 100vw;
  height: 100vh;
}

.tel-main {
  padding: 20rpx 20rpx;
}
.logo-img {
  width: 350rpx;
  height: 350rpx;
}

.logo {
  //margin-top: 100rpx;
  margin-bottom: 80rpx;
  padding-top: 20rpx;
  padding-bottom: 10rpx;
  display: flex;
  justify-content: center;

}


.tel {
  width: 95%;
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
  color: #FFFFFF;
  background-color: #49BDFB;
  border-radius: 40rpx;
  display: flex;
  justify-content: center;
  margin: auto; /* 添加此行以实现水平居中 */
  margin-top: 50rpx;
}
.login-other {
  padding: 20rpx 0;
}
.other-text{
  display: flex;
  padding:50rpx 0;
}
.other-text view {
  line-height: 0;
  padding: 0 10rpx;
}
.other-text:after{
    flex:1;
    content:'';
    height: 2rpx;
    background-color: #878683;
}
.other-text::before{
      flex:1;
      content:'';
      height: 2rpx;
      background-color: #a39d97;
}
.other{
  display: flex;
  justify-content: space-around;
}
.other-item{
  display: flex;
  flex-direction: column;
  justify-content: center;
  alalign-items: center;
}
.other-item image{
  width: 110rpx;
  height: 110rpx;
}
.login-user{
  font-size: 32rpx;
  padding:20rpx 0;
  display: flex;
  align-items: center;
  border-bottom:2rpx solid #402f2f;
}
.user-text{
  margin-left: 20rpx;
  padding-right: 20rpx;
}
</style>